//已经加载图片的数量
var loadedImageCount = 0;
//表示第几页
var page = 0;
//  var isDone = true;
var timer;
var diXian;

window.onload = function(){
    window.onscroll = function(){
        var st = document.body.scrollTop||document.documentElement.scrollTop; //0
        var ch = document.body.clientHeight||document.documentElement.clientHeight;//1136
        var sh = document.body.scrollHeight||document.documentElement.scrollHeight;

        var isDaoDi = st + ch == sh;
        if(isDaoDi&&!diXian){
            // 滚动加载下一页
            loadNextPageData();
        }
        // 滚动加载图片
        loadRealImage();
    }
};

// 当打开网页时，访问第一页数据
loadNextPageData();
// 1.回到顶部
function toTop(){
    $("html,body").animate({ scrollTop: 0 }, 500);
//       var st = document.body.scrollTop||document.documentElement.scrollTop;
//       var speed = st/30;
//       console.log(speed);
//       timer = setInterval(function(){
//           if(st==0){
//               clearInterval(timer);
//           }
//
//           var currentTop = parseInt(st);
//           document.body.scrollTop = currentTop - speed;
//           document.documentElement.scrollTop = currentTop - speed;
//       },2);
}
// 2.加载下一页数据
function loadNextPageData(){
    // if(!isDone){
    //    return;
    // }
    page++;

    if(page>=2){
        loading2.style.display = "block";
    }
    //4996
    // var pageCount = (page-1)*44+4900;
    var pageCount = (page-1)*44;
    //  var pageCount = 4996;
    // 1 ==> 0
    // 2 ==> 44
    // 3 ==> 88
    // 4 ==>132
    // d1.style.display = "flex";


    //isDone = false;



    $.ajax(
        {
            url:"https://s.taobao.com/search?data-key=s&data-value="+pageCount+"&ajax=true&_ksTS=1530687156759_853&q=%E8%8A%B1&imgfile=&commend=all&ssid=s5-e&search_type=item&sourceId=tb.index&spm=a21bo.2017.201856-taobao-item.1&ie=utf8&initiative_id=tbindexz_20170306&bcoffset=1&ntoffset=7&p4ppushleft=2%2C48",


  dataType:"jsonp",
  success:function(data){
      loadData(data);
      // console.log(data);
  }
}
);
}
// 2.1 加载数据函数
function loadData(data){
// productArr 是产品信息数组
if(!data.mods.itemlist.data){
if(!diXian) {
  diXian = document.createElement("div");
  diXian.innerHTML = "我是有底线的";
  diXian.style.textAlign = "center";
  diXian.style.padding = "0.5rem";
  document.body.appendChild(diXian);
  loading2.style.display = "none";
}
d1.style.display = "none";
return;
}

var productArr = data.mods.itemlist.data.auctions;



for(var i=0;i<productArr.length;i++){
// p 就是某一个件商品
var p = productArr[i];
var productDiv = document.createElement("div");
productDiv.className = "product fl";

var image = document.createElement("img");
//image.src = "http:" + p.pic_url+"_180x180.jpg_.webp";
// image.src = "http:" + p.pic_url;
image.setAttribute("real_image_src","http:" + p.pic_url+"_180x180.jpg");
image.src = "images/dot.png";
var titleDiv = document.createElement("div");
titleDiv.innerHTML = p.title;
var priceDiv = document.createElement("div");
priceDiv.innerHTML = p.view_price;


productDiv.appendChild(image);
productDiv.appendChild(titleDiv);
productDiv.appendChild(priceDiv);

productDiv.p = p;
// 单击某一件商品
productDiv.onclick = function(){
  // 跳转商品详情页
  // JSON.stringify(p) 将p这个对象转成JSON字符串

  localStorage.setItem("currentP",JSON.stringify(this.p));
  location = "item.html";
};

productList.appendChild(productDiv);
}

//  isDone = true;

// productList.getElementsByTagName("img");
// jquery 充分使用了css3 选择器来作为选择元素的方法
// onclick = load();
// onmouseover = mouseover();
// onload = load();
// 原生JS事件写法
//       d1.onclick = function(){
//
//       }
// jQuery 事件写法
//       $("#d1").click(function(){
//
//       });

// img 有一个事件名为onload ，意思是当图片加载完成后执行
loadedImageCount = 0;



$("#productList img").load(
function(){
  loadedImageCount++;

  // console.log(loadedImageCount);
  if(productArr.length==loadedImageCount){
      console.log("所有图片加载完毕！")
      // 在1秒内让该元素淡入出现
      $("#productList").fadeIn(400);
      //加载真实图片
      loadRealImage();
      d1.style.display = "none";

  }
}
);

}
// 3.加载真实图片
function loadRealImage(){
var images = productList.getElementsByTagName("img");
// 这三十六张图
// 首先俺们要显示在可视区域的图片

var st = document.body.scrollTop||document.documentElement.scrollTop; //0
var ch = document.body.clientHeight||document.documentElement.clientHeight;//1136
var sh = document.body.scrollHeight||document.documentElement.scrollHeight;

// 某元素离顶部距离加上该元素的高度，如果这个结果小于 1136,
// 该元素就完全在可视区域
// pic 是一个普通图片元素

for(var i=0;i<images.length;i++) {
var picParent = images[i].parentNode;
//eleheight 元素高度
var eleheight = $(picParent).height();
//eleOffsetTop 元素离顶部距离
var eleOffsetTop = $(picParent).offset().top;

if(eleheight+eleOffsetTop-st<ch){
  if(images[i].getAttribute("real_image_src")) {
      images[i].src = images[i].getAttribute("real_image_src");
      images[i].setAttribute("real_image_src", "");
      images[i].style.opacity = 1;
  }

}
}
}
